<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2870287" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">安排</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fb;</span>
                <div class="name">订单-已完成_fill</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fd;</span>
                <div class="name">订单-未完成_fill</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">漏洞管控-1</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">公告资讯</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">科技培训</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">28C点击</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">扫码</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">上传</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">电子签名-指纹</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe818;</span>
                <div class="name">电子签名</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">退出</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">文件-文件修改</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">文件-法律援助</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">complaint</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">食品药品监管</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea47;</span>
                <div class="name">通用类_重点监室预案</div>
                <div class="code-name">&amp;#xea47;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">模板管理</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">手机号</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">产品类别设置 goods/ppe/category</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">圈选区域</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">共享图标(状态类、操作类）-23</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">共享图标(状态类、操作类）-56</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec23;</span>
                <div class="name">分组管理</div>
                <div class="code-name">&amp;#xec23;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">菜单</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">权限设置</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">部门设置</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">应用用户管理</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe835;</span>
                <div class="name">采集</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">企业图谱</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">风险报告</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">散点图</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">规避知产风险</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">培训</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">物流</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">图标-下架</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">工程考核</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">快</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">社区互动</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe897;</span>
                <div class="name">发布2</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">优质粮食工程</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">店铺2</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">膨化食品</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe763;</span>
                <div class="name">lib-24</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">已完成</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">信用评价</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">飞行漫游</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">随机播放_32</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeab8;</span>
                <div class="name">二级-虚拟机安全检查</div>
                <div class="code-name">&amp;#xeab8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">调度检查</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">法律诉讼</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">winfo-icon-指派</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec4d;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xec4d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec5c;</span>
                <div class="name">数据挖掘</div>
                <div class="code-name">&amp;#xec5c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">粮食安全考核</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">计划管理</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">3-4成品等级</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">动态</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">制梁计划</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe871;</span>
                <div class="name">报警,警报,报警灯,危险</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">未完成任务</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">查询</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb66;</span>
                <div class="name">数据看板</div>
                <div class="code-name">&amp;#xeb66;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">人员绩效</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">交办单位</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">统计2</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">云数据库</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">风险等级-01</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">巡检处理人员</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec32;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xec32;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">档案</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">生产</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">餐饮</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1704339154705') format('woff2'),
       url('iconfont.woff?t=1704339154705') format('woff'),
       url('iconfont.ttf?t=1704339154705') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-anpai"></span>
            <div class="name">
              安排
            </div>
            <div class="code-name">.icon-anpai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-order-completed_fill"></span>
            <div class="name">
              订单-已完成_fill
            </div>
            <div class="code-name">.icon-order-completed_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-order-incomplete_fill"></span>
            <div class="name">
              订单-未完成_fill
            </div>
            <div class="code-name">.icon-order-incomplete_fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loudongguankong-1"></span>
            <div class="name">
              漏洞管控-1
            </div>
            <div class="code-name">.icon-loudongguankong-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-safe-bluefuben"></span>
            <div class="name">
              公告资讯
            </div>
            <div class="code-name">.icon-icon-safe-bluefuben
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kejipeixun"></span>
            <div class="name">
              科技培训
            </div>
            <div class="code-name">.icon-kejipeixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-28Cdianji"></span>
            <div class="name">
              28C点击
            </div>
            <div class="code-name">.icon-a-28Cdianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icon-dayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scan"></span>
            <div class="name">
              扫码
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuan"></span>
            <div class="name">
              上传
            </div>
            <div class="code-name">.icon-shangchuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianziqianming-zhiwen"></span>
            <div class="name">
              电子签名-指纹
            </div>
            <div class="code-name">.icon-dianziqianming-zhiwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianziqianming"></span>
            <div class="name">
              电子签名
            </div>
            <div class="code-name">.icon-dianziqianming
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuichu"></span>
            <div class="name">
              退出
            </div>
            <div class="code-name">.icon-tuichu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiajiantou"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.icon-xiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wj-wjxg"></span>
            <div class="name">
              文件-文件修改
            </div>
            <div class="code-name">.icon-wj-wjxg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wj-flyz"></span>
            <div class="name">
              文件-法律援助
            </div>
            <div class="code-name">.icon-wj-flyz
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tousu"></span>
            <div class="name">
              complaint
            </div>
            <div class="code-name">.icon-tousu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipinyaopinjianguan"></span>
            <div class="name">
              食品药品监管
            </div>
            <div class="code-name">.icon-shipinyaopinjianguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongyongleizhongdianjianshiyuan"></span>
            <div class="name">
              通用类_重点监室预案
            </div>
            <div class="code-name">.icon-tongyongleizhongdianjianshiyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobanguanli"></span>
            <div class="name">
              模板管理
            </div>
            <div class="code-name">.icon-mobanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoujihao"></span>
            <div class="name">
              手机号
            </div>
            <div class="code-name">.icon-shoujihao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-goodsppecategory"></span>
            <div class="name">
              产品类别设置 goods/ppe/category
            </div>
            <div class="code-name">.icon-goodsppecategory
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxuanquyu"></span>
            <div class="name">
              圈选区域
            </div>
            <div class="code-name">.icon-quanxuanquyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxiangtubiaozhuangtaileicaozuolei23"></span>
            <div class="name">
              共享图标(状态类、操作类）-23
            </div>
            <div class="code-name">.icon-gongxiangtubiaozhuangtaileicaozuolei23
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongxiangtubiaozhuangtaileicaozuolei56"></span>
            <div class="name">
              共享图标(状态类、操作类）-56
            </div>
            <div class="code-name">.icon-gongxiangtubiaozhuangtaileicaozuolei56
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenzuguanli"></span>
            <div class="name">
              分组管理
            </div>
            <div class="code-name">.icon-fenzuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              菜单
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxianshezhi"></span>
            <div class="name">
              权限设置
            </div>
            <div class="code-name">.icon-quanxianshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bumenshezhi"></span>
            <div class="name">
              部门设置
            </div>
            <div class="code-name">.icon-bumenshezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyongyonghuguanli"></span>
            <div class="name">
              应用用户管理
            </div>
            <div class="code-name">.icon-yingyongyonghuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caiji"></span>
            <div class="name">
              采集
            </div>
            <div class="code-name">.icon-caiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiyetupu"></span>
            <div class="name">
              企业图谱
            </div>
            <div class="code-name">.icon-qiyetupu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxianbaogao"></span>
            <div class="name">
              风险报告
            </div>
            <div class="code-name">.icon-fengxianbaogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditu"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.icon-ditu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sandiantu"></span>
            <div class="name">
              散点图
            </div>
            <div class="code-name">.icon-sandiantu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guibizhichanfengxian"></span>
            <div class="name">
              规避知产风险
            </div>
            <div class="code-name">.icon-guibizhichanfengxian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-peixun"></span>
            <div class="name">
              培训
            </div>
            <div class="code-name">.icon-peixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wuliu"></span>
            <div class="name">
              物流
            </div>
            <div class="code-name">.icon-wuliu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao-xiajia"></span>
            <div class="name">
              图标-下架
            </div>
            <div class="code-name">.icon-tubiao-xiajia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongchengkaohe"></span>
            <div class="name">
              工程考核
            </div>
            <div class="code-name">.icon-gongchengkaohe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuai"></span>
            <div class="name">
              快
            </div>
            <div class="code-name">.icon-kuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-menu_sqhd"></span>
            <div class="name">
              社区互动
            </div>
            <div class="code-name">.icon-menu_sqhd
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabu2"></span>
            <div class="name">
              发布2
            </div>
            <div class="code-name">.icon-fabu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dami"></span>
            <div class="name">
              优质粮食工程
            </div>
            <div class="code-name">.icon-dami
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu1"></span>
            <div class="name">
              店铺2
            </div>
            <div class="code-name">.icon-dianpu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-penghuashipin"></span>
            <div class="name">
              膨化食品
            </div>
            <div class="code-name">.icon-penghuashipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lib24"></span>
            <div class="name">
              lib-24
            </div>
            <div class="code-name">.icon-lib24
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yiwancheng"></span>
            <div class="name">
              已完成
            </div>
            <div class="code-name">.icon-yiwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinyongpingjia"></span>
            <div class="name">
              信用评价
            </div>
            <div class="code-name">.icon-xinyongpingjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-biaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-feixingmanyou"></span>
            <div class="name">
              飞行漫游
            </div>
            <div class="code-name">.icon-icon-feixingmanyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suijibofang"></span>
            <div class="name">
              随机播放_32
            </div>
            <div class="code-name">.icon-suijibofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erji-xunijianquanjiancha"></span>
            <div class="name">
              二级-虚拟机安全检查
            </div>
            <div class="code-name">.icon-erji-xunijianquanjiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tiaodujiancha"></span>
            <div class="name">
              调度检查
            </div>
            <div class="code-name">.icon-tiaodujiancha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-falvsusong"></span>
            <div class="name">
              法律诉讼
            </div>
            <div class="code-name">.icon-falvsusong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-winfo-icon-zhipai"></span>
            <div class="name">
              winfo-icon-指派
            </div>
            <div class="code-name">.icon-winfo-icon-zhipai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuwajue"></span>
            <div class="name">
              数据挖掘
            </div>
            <div class="code-name">.icon-shujuwajue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaoherenwujihua"></span>
            <div class="name">
              粮食安全考核
            </div>
            <div class="code-name">.icon-kaoherenwujihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touzijihuaguanli"></span>
            <div class="name">
              计划管理
            </div>
            <div class="code-name">.icon-touzijihuaguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--chengpindengji"></span>
            <div class="name">
              3-4成品等级
            </div>
            <div class="code-name">.icon--chengpindengji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dongtai"></span>
            <div class="name">
              动态
            </div>
            <div class="code-name">.icon-dongtai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiliangjihua"></span>
            <div class="name">
              制梁计划
            </div>
            <div class="code-name">.icon-zhiliangjihua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alarm"></span>
            <div class="name">
              报警,警报,报警灯,危险
            </div>
            <div class="code-name">.icon-alarm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weiwanchengrenwu"></span>
            <div class="name">
              未完成任务
            </div>
            <div class="code-name">.icon-weiwanchengrenwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaxun"></span>
            <div class="name">
              查询
            </div>
            <div class="code-name">.icon-chaxun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujukanban"></span>
            <div class="name">
              数据看板
            </div>
            <div class="code-name">.icon-shujukanban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenjixiao"></span>
            <div class="name">
              人员绩效
            </div>
            <div class="code-name">.icon-gerenjixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaobandanwei"></span>
            <div class="name">
              交办单位
            </div>
            <div class="code-name">.icon-jiaobandanwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongji2"></span>
            <div class="name">
              统计2
            </div>
            <div class="code-name">.icon-tongji2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yidongyunkongzhitaiicon42"></span>
            <div class="name">
              云数据库
            </div>
            <div class="code-name">.icon-yidongyunkongzhitaiicon42
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-dianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fengxiandengji-"></span>
            <div class="name">
              风险等级-01
            </div>
            <div class="code-name">.icon-fengxiandengji-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunjianchulirenyuan"></span>
            <div class="name">
              巡检处理人员
            </div>
            <div class="code-name">.icon-xunjianchulirenyuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dangan"></span>
            <div class="name">
              档案
            </div>
            <div class="code-name">.icon-dangan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shengchan"></span>
            <div class="name">
              生产
            </div>
            <div class="code-name">.icon-shengchan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canyin"></span>
            <div class="name">
              餐饮
            </div>
            <div class="code-name">.icon-canyin
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anpai"></use>
                </svg>
                <div class="name">安排</div>
                <div class="code-name">#icon-anpai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-order-completed_fill"></use>
                </svg>
                <div class="name">订单-已完成_fill</div>
                <div class="code-name">#icon-order-completed_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-order-incomplete_fill"></use>
                </svg>
                <div class="name">订单-未完成_fill</div>
                <div class="code-name">#icon-order-incomplete_fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loudongguankong-1"></use>
                </svg>
                <div class="name">漏洞管控-1</div>
                <div class="code-name">#icon-loudongguankong-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-safe-bluefuben"></use>
                </svg>
                <div class="name">公告资讯</div>
                <div class="code-name">#icon-icon-safe-bluefuben</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kejipeixun"></use>
                </svg>
                <div class="name">科技培训</div>
                <div class="code-name">#icon-kejipeixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-28Cdianji"></use>
                </svg>
                <div class="name">28C点击</div>
                <div class="code-name">#icon-a-28Cdianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#icon-dayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">扫码</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuan"></use>
                </svg>
                <div class="name">上传</div>
                <div class="code-name">#icon-shangchuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianziqianming-zhiwen"></use>
                </svg>
                <div class="name">电子签名-指纹</div>
                <div class="code-name">#icon-dianziqianming-zhiwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianziqianming"></use>
                </svg>
                <div class="name">电子签名</div>
                <div class="code-name">#icon-dianziqianming</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichu"></use>
                </svg>
                <div class="name">退出</div>
                <div class="code-name">#icon-tuichu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiajiantou"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#icon-xiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wj-wjxg"></use>
                </svg>
                <div class="name">文件-文件修改</div>
                <div class="code-name">#icon-wj-wjxg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wj-flyz"></use>
                </svg>
                <div class="name">文件-法律援助</div>
                <div class="code-name">#icon-wj-flyz</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tousu"></use>
                </svg>
                <div class="name">complaint</div>
                <div class="code-name">#icon-tousu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipinyaopinjianguan"></use>
                </svg>
                <div class="name">食品药品监管</div>
                <div class="code-name">#icon-shipinyaopinjianguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongyongleizhongdianjianshiyuan"></use>
                </svg>
                <div class="name">通用类_重点监室预案</div>
                <div class="code-name">#icon-tongyongleizhongdianjianshiyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobanguanli"></use>
                </svg>
                <div class="name">模板管理</div>
                <div class="code-name">#icon-mobanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoujihao"></use>
                </svg>
                <div class="name">手机号</div>
                <div class="code-name">#icon-shoujihao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-goodsppecategory"></use>
                </svg>
                <div class="name">产品类别设置 goods/ppe/category</div>
                <div class="code-name">#icon-goodsppecategory</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxuanquyu"></use>
                </svg>
                <div class="name">圈选区域</div>
                <div class="code-name">#icon-quanxuanquyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxiangtubiaozhuangtaileicaozuolei23"></use>
                </svg>
                <div class="name">共享图标(状态类、操作类）-23</div>
                <div class="code-name">#icon-gongxiangtubiaozhuangtaileicaozuolei23</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongxiangtubiaozhuangtaileicaozuolei56"></use>
                </svg>
                <div class="name">共享图标(状态类、操作类）-56</div>
                <div class="code-name">#icon-gongxiangtubiaozhuangtaileicaozuolei56</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenzuguanli"></use>
                </svg>
                <div class="name">分组管理</div>
                <div class="code-name">#icon-fenzuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">菜单</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxianshezhi"></use>
                </svg>
                <div class="name">权限设置</div>
                <div class="code-name">#icon-quanxianshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bumenshezhi"></use>
                </svg>
                <div class="name">部门设置</div>
                <div class="code-name">#icon-bumenshezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyongyonghuguanli"></use>
                </svg>
                <div class="name">应用用户管理</div>
                <div class="code-name">#icon-yingyongyonghuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caiji"></use>
                </svg>
                <div class="name">采集</div>
                <div class="code-name">#icon-caiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyetupu"></use>
                </svg>
                <div class="name">企业图谱</div>
                <div class="code-name">#icon-qiyetupu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxianbaogao"></use>
                </svg>
                <div class="name">风险报告</div>
                <div class="code-name">#icon-fengxianbaogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditu"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#icon-ditu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sandiantu"></use>
                </svg>
                <div class="name">散点图</div>
                <div class="code-name">#icon-sandiantu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guibizhichanfengxian"></use>
                </svg>
                <div class="name">规避知产风险</div>
                <div class="code-name">#icon-guibizhichanfengxian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-peixun"></use>
                </svg>
                <div class="name">培训</div>
                <div class="code-name">#icon-peixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuliu"></use>
                </svg>
                <div class="name">物流</div>
                <div class="code-name">#icon-wuliu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao-xiajia"></use>
                </svg>
                <div class="name">图标-下架</div>
                <div class="code-name">#icon-tubiao-xiajia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongchengkaohe"></use>
                </svg>
                <div class="name">工程考核</div>
                <div class="code-name">#icon-gongchengkaohe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuai"></use>
                </svg>
                <div class="name">快</div>
                <div class="code-name">#icon-kuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-menu_sqhd"></use>
                </svg>
                <div class="name">社区互动</div>
                <div class="code-name">#icon-menu_sqhd</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabu2"></use>
                </svg>
                <div class="name">发布2</div>
                <div class="code-name">#icon-fabu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dami"></use>
                </svg>
                <div class="name">优质粮食工程</div>
                <div class="code-name">#icon-dami</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu1"></use>
                </svg>
                <div class="name">店铺2</div>
                <div class="code-name">#icon-dianpu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-penghuashipin"></use>
                </svg>
                <div class="name">膨化食品</div>
                <div class="code-name">#icon-penghuashipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lib24"></use>
                </svg>
                <div class="name">lib-24</div>
                <div class="code-name">#icon-lib24</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yiwancheng"></use>
                </svg>
                <div class="name">已完成</div>
                <div class="code-name">#icon-yiwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinyongpingjia"></use>
                </svg>
                <div class="name">信用评价</div>
                <div class="code-name">#icon-xinyongpingjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-biaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-feixingmanyou"></use>
                </svg>
                <div class="name">飞行漫游</div>
                <div class="code-name">#icon-icon-feixingmanyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suijibofang"></use>
                </svg>
                <div class="name">随机播放_32</div>
                <div class="code-name">#icon-suijibofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erji-xunijianquanjiancha"></use>
                </svg>
                <div class="name">二级-虚拟机安全检查</div>
                <div class="code-name">#icon-erji-xunijianquanjiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tiaodujiancha"></use>
                </svg>
                <div class="name">调度检查</div>
                <div class="code-name">#icon-tiaodujiancha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-falvsusong"></use>
                </svg>
                <div class="name">法律诉讼</div>
                <div class="code-name">#icon-falvsusong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-winfo-icon-zhipai"></use>
                </svg>
                <div class="name">winfo-icon-指派</div>
                <div class="code-name">#icon-winfo-icon-zhipai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuwajue"></use>
                </svg>
                <div class="name">数据挖掘</div>
                <div class="code-name">#icon-shujuwajue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaoherenwujihua"></use>
                </svg>
                <div class="name">粮食安全考核</div>
                <div class="code-name">#icon-kaoherenwujihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touzijihuaguanli"></use>
                </svg>
                <div class="name">计划管理</div>
                <div class="code-name">#icon-touzijihuaguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--chengpindengji"></use>
                </svg>
                <div class="name">3-4成品等级</div>
                <div class="code-name">#icon--chengpindengji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dongtai"></use>
                </svg>
                <div class="name">动态</div>
                <div class="code-name">#icon-dongtai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiliangjihua"></use>
                </svg>
                <div class="name">制梁计划</div>
                <div class="code-name">#icon-zhiliangjihua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alarm"></use>
                </svg>
                <div class="name">报警,警报,报警灯,危险</div>
                <div class="code-name">#icon-alarm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weiwanchengrenwu"></use>
                </svg>
                <div class="name">未完成任务</div>
                <div class="code-name">#icon-weiwanchengrenwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaxun"></use>
                </svg>
                <div class="name">查询</div>
                <div class="code-name">#icon-chaxun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujukanban"></use>
                </svg>
                <div class="name">数据看板</div>
                <div class="code-name">#icon-shujukanban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenjixiao"></use>
                </svg>
                <div class="name">人员绩效</div>
                <div class="code-name">#icon-gerenjixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaobandanwei"></use>
                </svg>
                <div class="name">交办单位</div>
                <div class="code-name">#icon-jiaobandanwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongji2"></use>
                </svg>
                <div class="name">统计2</div>
                <div class="code-name">#icon-tongji2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yidongyunkongzhitaiicon42"></use>
                </svg>
                <div class="name">云数据库</div>
                <div class="code-name">#icon-yidongyunkongzhitaiicon42</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-dianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fengxiandengji-"></use>
                </svg>
                <div class="name">风险等级-01</div>
                <div class="code-name">#icon-fengxiandengji-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjianchulirenyuan"></use>
                </svg>
                <div class="name">巡检处理人员</div>
                <div class="code-name">#icon-xunjianchulirenyuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dangan"></use>
                </svg>
                <div class="name">档案</div>
                <div class="code-name">#icon-dangan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengchan"></use>
                </svg>
                <div class="name">生产</div>
                <div class="code-name">#icon-shengchan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canyin"></use>
                </svg>
                <div class="name">餐饮</div>
                <div class="code-name">#icon-canyin</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
